<template>
  <div class="base" @click="onSliderClick" :class="{ active: onStartWidth() }">
    <img src="/logo.png" />
    <div class="title">{{ title }}</div>
  </div>
</template>
<script setup lang="ts" name="MySliderItem">
// import { useRoute } from 'vue-router'
import myRouter from '@/router'
import { log } from '@/utils/com'
import { watch } from 'vue'
// const route = useRoute()
//参数接收:
const props = defineProps(['title', 'path', 'pathActive', 'curPath'])
//声明回调事件，执行回调事件:emit('onClick')
const emit = defineEmits(['onClick'])
function onSliderClick() {
  if (!props.path) {
    return
  }
  // 触发自定义事件通知父组件
  emit('onClick', props.title)
  //路由
  myRouter.push(props.path)
}
function onStartWidth() {
  const key: string = props.pathActive ? props.pathActive : props.path
  const cur = props.curPath ? props.curPath.toString() : ''
  return cur.startsWith(key)

  // return route.path && route.path.toString().startsWith(key)
}
watch(
  () => props.curPath,
  () => {
    log('子控件监听到了路由变化：' + props.curPath)
  },
)
</script>
<style lang="css" scoped>
.base {
  /* 垂直居中 */
  align-items: center;
  padding-left: 10%;
  display: flex;
  color: black;
  cursor: pointer;
  background-color: transparent;
}
.base:hover {
  background-color: var(--main-color8);
}

img {
  margin: 3px;
  width: 15px;
  height: 15px;
}
.title {
  margin-top: 3px;
  margin-bottom: 3px;
  padding: 5px;
}
div .active {
  background-color: white;
  color: var(--main-color);
}
</style>
